<template>
  <div>
    <div class="page_tab_top">
      <div
        class="tab_list_item"
        @click="cutTab(1)"
        :class="currentIndex === 1 ? 'tab_active' : ''"
      >
        技师上钟类型
      </div>
      <!-- <div
        class="tab_list_item"
        @click="cutTab(2)"
        :class="currentIndex === 2 ? 'tab_active' : ''"
      >
        约客提成
      </div> -->
      <div
        class="tab_list_item"
        @click="cutTab(2)"
        :class="currentIndex === 2 ? 'tab_active' : ''"
      >
        技师充卡满提成
      </div>
      <div
        class="tab_list_item"
        @click="cutTab(3)"
        :class="currentIndex === 3 ? 'tab_active' : ''"
      >
        前台充卡提成
      </div>
      <div
        class="tab_list_item"
        @click="cutTab(4)"
        :class="currentIndex === 4 ? 'tab_active' : ''"
      >
        前台约客提成
      </div>
      <div
        class="tab_list_item"
        @click="cutTab(5)"
        :class="currentIndex === 5 ? 'tab_active' : ''"
      >
        前台待客提成
      </div>
    </div>
    <Handcommission
      ref="Handcommission"
      v-show="this.currentIndex === 1"
    ></Handcommission>
    <!-- <Covenant ref="Covenant" v-show="this.currentIndex === 2"></Covenant> -->
    <ChargeCard ref="ChargeCard" v-show="this.currentIndex === 2"></ChargeCard>
    <ChargeCardCommission
      ref="ChargeCardCommission"
      v-show="this.currentIndex === 3"
    ></ChargeCardCommission>
    <CovenantCustCom
      ref="CovenantCustCom"
      v-show="this.currentIndex === 4"
    ></CovenantCustCom>
    <waitCustomerCom
      ref="waitCustomerCom"
      v-show="this.currentIndex === 5"
    ></waitCustomerCom>
  </div>
</template>
    
<script>
import Handcommission from "./Handcommission.vue";
import Covenant from "./Covenant.vue";
import ChargeCard from "./ChargeCard.vue";
import ChargeCardCommission from "./ChargeCardCommission.vue";
import CovenantCustCom from "./CovenantCustCom.vue";
import waitCustomerCom from "./waitCustomerCom.vue";

export default {
  components: {
    Handcommission,
    Covenant,
    ChargeCard,
    ChargeCardCommission,
    CovenantCustCom,
    waitCustomerCom,
  },
  name: "Storeadmincommission",

  data() {
    return {
      currentIndex: 1,
    };
  },

  mounted() {
    this.$nextTick(() => {
      this.changeChild();
    });
  },

  methods: {
    //  // 顶部tab切换
    cutTab(i) {
      this.currentIndex = i;
      this.changeChild();
    },

    changeChild() {
      if (this.currentIndex === 1) {
        this.$refs.Handcommission.resQ();
      } else if (this.currentIndex === 2) {
        this.$refs.ChargeCard.resQ();
      } else if (this.currentIndex === 3) {
        this.$refs.ChargeCardCommission.resQ();
      } else if (this.currentIndex === 4) {
        this.$refs.CovenantCustCom.resQ();
      } else if (this.currentIndex === 5) {
        this.$refs.waitCustomerCom.resQ();
      }
    },
  },
};
</script>
    
<style lang="scss" scoped>
</style>